<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>空箱调出管理</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div id="takeoutMain">
      <a-form-model layout="inline" :model="form" style="padding:2px 0px 24px 0px;">
        <a-form-model-item label="箱号" prop="containerNoLike">
          <a-input v-model="form.containerNoLike" style="width:180px" />
        </a-form-model-item>
        <a-form-model-item label="持箱人">
          <a-select v-model="form.holderId" style="width:200px;">
            <a-select-option value>全部</a-select-option>
            <a-select-option
              v-for="(item,index) in holderList"
              :key="index"
              :value="item.id"
            >{{item.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="箱况" prop="containerStatus">
          <a-select v-model="form.containerStatus" style="width:120px;">
            <a-select-option value>全部</a-select-option>
            <a-select-option value="A">A</a-select-option>
            <a-select-option value="COMMON">普通</a-select-option>
            <a-select-option value="BROKEN">坏箱</a-select-option>
            <a-select-option value="DIRTY">污箱</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="所在港口" prop="portId">
          <a-select v-model="form.portId" style="width:120px;">
            <a-select-option value>全部</a-select-option>
            <a-select-option
              v-for="(item,index) in portList"
              :key="index"
              :value="item.id"
            >{{item.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="船名/航次" prop="voyageLike">
          <a-input v-model="form.voyageLike" style="width:180px" />
        </a-form-model-item>
        <a-form-model-item label="结算对象" prop="custNameLike">
          <a-input v-model="form.custNameLike" style="width:180px" />
        </a-form-model-item>
        <a-form-model-item label="调出日期" prop="time">
          <a-range-picker @change="onChange">
            <a-icon slot="suffixIcon" type="calendar" />
          </a-range-picker>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="check">查询</a-button>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="excelExport">导出Excel</a-button>
        </a-form-model-item>
      </a-form-model>
      <a-table :row-key="(record,index) => index" :columns="columns" :data-source="data" :pagination="pagination" :loading="loading" :scroll="{x:1400}">
        <template slot="status" slot-scope="text, record">
          <span v-if="record.containerStatus === 'A'">A</span>
          <span v-else-if="record.containerStatus === 'COMMON'">普通</span>
          <span v-else-if="record.containerStatus === 'BROKEN'">坏箱</span>
          <span v-else-if="record.containerStatus === 'DIRTY'">污箱</span>
          <span v-else>--</span>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script>
import { commonExport } from '@/api/request'
import {
  queryPortNameList,
  queryHolderNameList,
  queryEmptyContainerOutList
} from '@/api/boxManagementCenter'
import moment from 'moment'

const columns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '箱号',
    dataIndex: 'containerNo'
  },
  {
    title: '持箱人',
    dataIndex: 'holder'
  },
  {
    title: '所属港口',
    dataIndex: 'portName'
  },
  {
    title: '箱况',
    _needName: true,
    dataIndex: 'containerStatus',
    scopedSlots: {
      customRender: 'status'
    }
  },
  {
    title: '船名航次',
    width: 250,
    dataIndex: 'shipVoyageName',
    customRender: (text, record, index) => {
      return record.shipVoyageName || '--'
      // return `${record.shipName ? record.shipName : '--'}/${
      //   record.voyageNumner ? record.voyageNumner : '--'
      // }`
    }
  },
  {
    title: '调出日期',
    dataIndex: 'loadingTime'
  },
  {
    title: '入港装卸费（元）',
    width: 150,
    dataIndex: 'enterHandlingFee',
    customRender: (text, record, index) => {
      return record.enterHandlingFee ? record.enterHandlingFee.toFixed(2) : '--'
    }
  },
  {
    title: '出港装卸费（元）',
    width: 150,
    dataIndex: 'outHandlingFee',
    customRender: (text, record, index) => {
      return record.outHandlingFee ? record.outHandlingFee.toFixed(2) : '--'
      // return `${record.outHandlingFee ? record.outHandlingFee : '--'}`
    }
  },
  {
    title: '结算对象',
    dataIndex: 'custName',
    width: 200,
    ellipsis: true
  }
]
export default {
  data () {
    return {
      dateFormat: 'YYYY-MM-DD',
      loading: true,
      portList: [],
      holderList: [],
      form: {
        containerNoLike: '', // 箱号
        holderId: '', // 持箱人id
        containerStatus: '', // 箱况 A(“A”),COMMON(“普通”),BROKEN(“坏箱”),DIRTY(“污箱”)
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        voyageLike: '', // 航次船名
        portId: '', // 港口id
        custNameLike: '' // 客户名称
      },
      pageNum: 1,
      pageSize: 10,
      data: [],
      columns,
      pagination: {}
    }
  },
  methods: {
    momentDate (date, format) {
      return moment(date)
    },
    portListRequest (e) {
      queryPortNameList(e)
        .then(res => {
          this.portList = res.data
        })
        .catch(rs => {})
    },
    holderListRequest (e) {
      queryHolderNameList(e)
        .then(res => {
          this.holderList = res.data
        })
        .catch(rs => {})
    },
    emptyListRequest (e) {
      this.loading = true
      queryEmptyContainerOutList(e)
        .then(res => {
          this.data = res.data.list
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.emptyListRequest(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.emptyListRequest(paramData)
            }
          }
          this.loading = false
        })
        .catch(rs => {})
    },
    onChange (date, dateString) {
      this.form.startDate = dateString[0]
      this.form.endDate = dateString[1]
    },
    check () {
      this.pageNum = 1
      this.emptyListRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    excelExport () {
      commonExport('/container/exportEmptyContainerOutList', {
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: this.columns
      })
    }
  },
  mounted () {
    this.portListRequest({
      status: 1,
      isContainerManagement: 1
    })
    this.holderListRequest({})
    this.emptyListRequest({
      pageNum: this.pageNum,
      pageSize: this.pageSize
    })
  }
}
</script>

<style lang="less" scoped>
#takeoutMain {
  padding: 24px;
  margin: 24px;
  background: #fff;
  min-height: 700px;
}
</style>
